<!-- 通过使用display改变原标签内容为任意内容
    none        不显示
    inline      行内容
    block       块内容（有宽高）
    inlinr-block    行内块内容（不会换行）
-->


<!-- display
    display:none        隐藏内容，什么都不显示
    display:block       改为块内容（可设置宽高）
    display:inline      改为行内容（无宽高）
-->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示</title>
    <style>
        .div1 {
            display: none;
        }

        .div2 {
            display: inline;
            background-color: hotpink;
            font-size: 50px;
            font-weight: normal;
            font-style: italic;
        }

        .span {
            display: none;
        }

        .span2 {
            display: block;
            width: 500px;
            height: 500px;
            background-color: rebeccapurple;
            text-align: center;
            line-height: 500px;
        }

        .span3 {
            display: block;
            background-color: lightcoral;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            
        }
        .span4{
            display: none;
        }
        
        .hover:hover + .target{
            display: block;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="div">块块块块块块块块块块</div>
    <br>
    <hr>
    <br>
    <div class="div1">块1块1块1块1块1块1块1块1块1块1</div>
    <br>
    <hr>
    <br>
    <div class="div2">块2块2块2块2块2块2块2块2块2块2</div>
    <br>
    <hr>
    <br>
    <span class="span">文本文本文本文本文本文本文本文本文本文本</span>
    <br>
    <hr>
    <br>
    <span class="span1">文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1</span>
    <br>
    <hr>
    <br>
    <span class="span2">文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2</span>
    <br>
    <hr>
    <br>
    <span class="span3 hover">鼠标悬停</span>
    <span class="span3 span4 target">妈妈生的</span>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>

</html>